﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>项目列表</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <link href="../../Content/project/project.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .resend_recover
        {
            border: 1px solid #CCCCCC;
            margin-bottom: 15px;
            margin-top: 10px;
            padding: 10px;
        }
        .div-leaderinfo
        {
            text-align: center;
            border: none;
        }
        .div-hover
        {
            width: 18px;
            height: 80px;
            float: left;
            background-color: #E1E1E1;
            border-radius: 4px 0px 0px 4px;
            -webkit-transition: border 0.3s ease;
        }
        .div-hover:hover
        {
            background-color: #444444;
        }
        .div-project
        {
            background-color: #F1F1F1;
            width: 488px;
            overflow: hidden;
            border: 1px solid #A8A8A8;
            margin: 15px 0 0 0;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 2px 2px 5px #aaa;
            box-shadow: 2px 2px 5px #aaa;
        }
        
        .div-project-info
        {
            float: left;
            margin: 10px 0px 10px 20px;
            width: 350px;
            height: 60px;
            display: table;
        }
        .div-project-info p
        {
            display: table-cell;
            vertical-align: middle;
        }
        .div-project-additional
        {
            background: none repeat scroll 0 0 #F9F9F9;
            border-top: 1px solid #A8A8A8;
            clear: both;
            padding: 10px 10px 10px 22px;
        }
        .div-member-list
        {
            max-width: 360px;
            min-height: 67px;
            padding: 5px 10px;
        }
        .div-member
        {
            width: 56px;
            margin: 0 2px;
            float: left;
            text-align: center;
        }
        .div-leader-list
        {
            width: 64px;
            height: 72px;
            -webkit-border-radius: 4px;
            margin-left: 400px;
            margin-top: 5px;
            border: none;
        }
        
        .img-photo-leader
        {
            width: 48px;
            height: 48px;
            padding: 2px;
        }
        .img-photo-member
        {
            width: 36px;
            height: 36px;
            padding: 4px;
        }
        #txt-projectname
        {
            font-size: 18px;
        }
        .fieldslist input
        {
            width: 240px;
        }
        .popup-block
        {
            z-index: 50;
        }
        #overlay
        {
            z-index: 49;
        }
        .contextPanelCover
        {
            background-color: transparent;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script type="text/javascript">
       
        //************* 全局变量

        var g_Var = {
            'tempUserId': null

    };

    //************* Accessor访问器
    var EzAccessor = {};
        
    function CreateAccessor() {
        if (ezmock.IS_MOCKED) {
            EzAccessor = CreateMockEzAccessor();

        } else {
            EzAccessor = CreateRealEzAccessor();
        }
    }


    function CreateMockEzAccessor() {
        //模拟实现服务器交互方法

        var mockEzAccessor = {

    };

    return mockEzAccessor;
}

function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getProjectList": function () { 
            return <%= WebJsonExtension.ToJson(Model.ProjectList) %>;
        },
        "getHasCreateProjectPermission": function () { 
            return <%= WebJsonExtension.ToJson(Model.HasCreateProjectPermission) %>;
        }
    };

return realEzAccessor;
}


function bindProjectInfo(projectList){
    if (projectList.length == 0) {
        $('.div-project-list').append($('<p class="no-items">还没有项目</p>'));  
        return;  
    }

    for( var key in projectList){
            var hoverDom = $('<div class="div-hover">');
            var rootDom = $('<div class="div-project"/>');
            var projectDom = $('<div class="div-project-info"/>');
            var nameStr = '<p>' +
                            '<span id="txt-projectname">{Name}</span>&nbsp;' + 
                            '<span id="txt-projectcode">{ProjectId}</span>&nbsp;' + 
                            '<small id="txtCreatOn">( {CreatOn} 创建 )</small>' +
                        '</p>';
        nameStr = nameStr.replace("{Name}", projectList[key].Name)
                         .replace("{ProjectId}", projectList[key].ProjectId)
                         .replace("{CreatOn}", Date.fromEpoch(projectList[key].CreatOn).toNiceTime());

        //普通项目成员
        var memberList = projectList[key].MemberList;
        var membersDom = getMemberListDom(memberList);
        //负责人
        var leader = projectList[key].Leader;
        var leaderDom = getLeaderDom(leader);
        projectDom.append(nameStr);                  

        var projectAdditionalDom = $('<div class="div-project-additional">')
            .append(membersDom);
           
        rootDom.append(hoverDom)
                .append(projectDom)
                .append(leaderDom)
                .appendTo($('.div-project-list'));

        if (projectAdditionalDom.html() != '') {
            rootDom.append(projectAdditionalDom);
        }

        //项目id
        $(rootDom).data('Id', projectList[key].Id);
        //hover 
        $(rootDom).hover(function(){
            var _self = $(this);
            _self.find('.div-hover').css({'background-color': '#444'})
            _self.css({'cursor': 'pointer'});
            
        },function(){ 
            var _self = $(this);
            _self.find('.div-hover').css({'background-color': '#ddd'})
            _self.css({'cursor': 'default'});
        });
           
    }

    $('.div-project').each(function (){
        var _self = $(this);
        _self.click(function() {
            window.location.href = "/project/projectWorkitems?id=" + _self.data('Id');
        });
    });

};

function getLeaderDom(leader){
    var leaderDom = $('<div class="div-leader-list"/>');
    var leaderInfoStr = '<div class="div-leaderinfo">' + 
                            '<img class="img-photo-leader" src="/core/headicon/{UserId}" alt="headicon" />' +
                            '<p class="txtMember">{UserName}</p>' + 
                        '</div>';
    leaderInfoStr = leaderInfoStr.replace("{UserId}", leader.Member.Id)   
                                 .replace("{UserName}",leader.Member.Name);
    leaderDom.append(leaderInfoStr);   
    
    return leaderDom;
}

function getMemberListDom(memberList) {
    var membersDom = $('<div class="div-member-list"/>');
    var count = 0;
    for (var key in memberList){
        if(memberList[key].Role == "member"){
            count++;
            if (count <= 5) {
                var memberInfoStr = '<div class="div-member">' +
                        '<img class="img-photo-member" src="/core/headicon/{UserId}" alt="headicon" />' +
                        '<p class="txtMember">{UserName}</p>';

                memberInfoStr = memberInfoStr.replace("{UserId}", memberList[key].Member.Id)   
                                             .replace("{UserName}", memberList[key].Member.Name);
                membersDom.append(memberInfoStr);   
            }
        }
    }
    if (count > 5) {
       membersDom.append('<div class="div-member"><p> ... <p></div>');
    }
    if (count == 0) {
        return "";
    }   

    return  membersDom;
} 

function setPageTitle (hasCreateProjectPermission) {
    if(hasCreateProjectPermission == true){
        $('.title').html('公司项目');
        $('.txt-pageRemind').html('您可以查看公司所有项目的详细信息,创建新的项目.');
    }else {
        $('.title').html('我的项目');
        $('.txt-pageRemind').html('您可以查看您参与的所有项目的详细信息.');
    }
}

//初始化页面
function initPage() {
    CreateAccessor();

    var hasCreateProjectPermission = EzAccessor.getHasCreateProjectPermission();
    setPageTitle(hasCreateProjectPermission);

    var projectList = EzAccessor.getProjectList();
    bindProjectInfo(projectList);
}


var DoCreateProject = function (callback) {
    $.AjaxBusy.show("创建中...");
    $('#content-add-project').find('.projcet-creator').ajaxSubmit({
        success: function (e) {
            callback(e);
        }
    });
    return
};

function initValidation() {
    $('#content-add-project').find('.projcet-creator').validate({
        rules:
            {
                projectName: {
                    required: true,
                },
                projectCode: {
                    required: true,
                }
            },
        messages:
            {
                projectName: {
                    required: "任务内容不能为空！"
                },
                projectCode: {
                    required: "任务编号不能为空！"
                }
            }
    });

};


//初始化事件
function initPageEvent() {
    
}

$(function () {
    initPage();
    initPageEvent();
});

    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <img src="../../Content/icons/projects_folder_badged.png" style="width: 48px; height: 48px;"
            alt="send" />
        <span class="title"></span>
    </div>
    <div id="page-body">
        <div class="resend_recover">
            <h3>
                我可以做些什么?</h3>
            <p style="font: 12px;" class="txt-pageRemind">
            </p>
        </div>
        <div class="div-project-list">
        </div>
    </div>
    <div class="page-submit">
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
        <%
            Html.RenderAction("_createProjectShortcut",
                              new { hasCreateProjectPermission = Model.HasCreateProjectPermission });
        %>
        <%
            Html.RenderAction("_projectTemplates",
                          new { hasCreateProjectPermission = Model.HasCreateProjectPermission });
        %>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
</asp:Content>
